<template>
  <div class="login">
    <div class="login-form">
      <div class="login-form-header center">
        <h1>登录</h1>
      </div>
      <div class="login-form-body center">
        <el-form
            ref="formRef"
            :model="userInfo"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item
              label="phone"
              prop="phone"
          >
            <el-input
                v-model.lazy="userInfo.phone"
                type="text"
                placeholder="Please enter your phone"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item
              label="password"
              prop="password"
          >
            <el-input
                v-model.lazy="userInfo.password"
                type="password"
                placeholder="Please enter your password"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="checked">
            <el-checkbox label="我已阅读并同意" v-model="userInfo.checked"/>
            <RouterLink to="/agreementt" style="margin-left: 5px; color: #8b51fd" target="_blank">
              后台管理协议
            </RouterLink>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-form-footer center">
        <el-button type="primary" @click="postLogin">登录</el-button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {reactive} from "vue";
import {postLoginAPI} from "@/api/user.ts";
import {useUserStore} from "@/store/user.ts";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const userInfo = reactive({
  phone: '',
  password: '',
  checked: true
})

const userStore = useUserStore()
const router = useRouter()
const postLogin = async () => {
  const res = await postLoginAPI(userInfo)
  if (res.code === 0) {
    userStore.setInfo(res.data.user)
    userStore.setToken(res.data.token)
    router.replace('/')
  } else {
    ElMessage({
      type: 'error',
      message: res.message
    })
  }
}

</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-form {
    color: white;
    border-radius: 20px;
    position: fixed;
    width: 750px;
    height: 500px;
    box-sizing: border-box;
    background-color: white;
    padding: 40px 20px;
  }

  .login-form-header {
    height: 100px;

    h1 {
      color: black;
      font-weight: 900;
    }
  }

  .login-form-body {
    display: flex;
    flex-direction: column;
    height: 200px;

    .demo-ruleForm {
      width: 500px;

      .el-input {
        height: 40px;
      }
    }
  }

  .login-form-footer {
    .el-button {
      width: 400px;
      height: 35px;
    }
  }
}
</style>